.character{
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font: 12px;
}

.character_bg{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-size: cover;
    transform-origin: center;
}

@keyframes breath {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}

/* @keyframes bg-charge1 {
    0%{opacity: 1;}
    12.5%{opacity: 1;}
    25%{opacity: 0;}
    37.5%{opacity: 0;}
    50%{opacity: 0;}
    62.5%{opacity: 0;}
    75%{opacity: 0;}
    87.5%{opacity: 0;}
    100%{opacity: 0;}
} */

.character_bg1{
    animation: breath 60s linear 0s infinite;
    opacity: 1;
} 

@keyframes bg-charge2 {
    0%{opacity: 0;}
    12.5%{opacity: 0;}
    25%{opacity: 1;}
    37.5%{opacity: 1;}
    50%{opacity: 0;}
    62.5%{opacity: 0;}
    75%{opacity: 0;}
    87.5%{opacity: 0;}
    100%{opacity: 0;}
}

.character_bg2{
    animation: bg-charge2 45s linear 0s infinite;
    opacity: 0;
}

@keyframes bg-charge3 {
    0%{opacity: 0;}
    12.5%{opacity: 0;}
    25%{opacity: 0;}
    37.5%{opacity: 1;}
    50%{opacity: 1;}
    62.5%{opacity: 0;}
    75%{opacity: 0;}
    87.5%{opacity: 0;}
    100%{opacity: 0;}
}

.character_bg3{
    animation: bg-charge3 45s linear 0s infinite;
    opacity: 0;
}

@keyframes bg-charge4 {
    0%{opacity: 0;}
    12.5%{opacity: 0;}
    25%{opacity: 0;}
    37.5%{opacity: 0;}
    50%{opacity: 1;}
    62.5%{opacity: 1;}
    75%{opacity: 0;}
    87.5%{opacity: 0;}
    100%{opacity: 0;}
}

.character_bg4{
    animation: bg-charge4 45s linear 0s infinite;
    opacity: 0;
}

@keyframes bg-charge5 {
    0%{opacity: 0;}
    12.5%{opacity: 0;}
    25%{opacity: 0;}
    37.5%{opacity: 0;}
    50%{opacity: 0;}
    62.5%{opacity: 1;}
    75%{opacity: 1;}
    87.5%{opacity: 0;}
    100%{opacity: 0;}
}

.character_bg5{
    animation: bg-charge5 45s linear 0s infinite;
    opacity: 0;
}

@keyframes bg-charge6 {
    0%{opacity: 0;}
    12.5%{opacity: 0;}
    25%{opacity: 0;}
    37.5%{opacity: 0;}
    50%{opacity: 0;}
    62.5%{opacity: 0;}
    75%{opacity: 1;}
    87.5%{opacity: 1;}
    100%{opacity: 0;}
}

.character_bg6{
    animation: bg-charge6 45s linear 0s infinite;
    opacity: 0;
}

@keyframes bg-charge7 {
    0%{opacity: 0;}
    12.5%{opacity: 0;}
    25%{opacity: 0;}
    37.5%{opacity: 0;}
    50%{opacity: 0;}
    62.5%{opacity: 0;}
    75%{opacity: 0;}
    87.5%{opacity: 1;}
    100%{opacity: 1;}
}

.character_bg7{
    animation: bg-charge7 45s linear 0s infinite;
    opacity: 0;
}

@keyframes bg-charge8 {
    0%{opacity: 1;}
    12.5%{opacity: 0;}
    25%{opacity: 0;}
    37.5%{opacity: 0;}
    50%{opacity: 0;}
    62.5%{opacity: 0;}
    75%{opacity: 0;}
    87.5%{opacity: 0;}
    100%{opacity: 1;}
}
.character_bg8{
    animation: bg-charge8 45s linear 0s infinite;
    opacity: 0;
}

.charcter_sidebar{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    padding-top: 150px;
}

.charcter_sidebar::before{
    position: absolute;
    top: 0;
    left: 30px;
    display: block;
    content: '';
    width: 2px;
    height: 1280px;
    background: rgb(255, 255, 255, 0.14);
}

.character_ch{
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 17px;
    color: #fff;
    user-select: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    padding-left: 70px;
    background: left center no-repeat;
    background-image: url(/imgs/figure/钻排.png);
    background-size: contain;
}

.character_ch:hover{
    cursor: pointer;
    opacity: 0.8;
    text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
    color: #fff;
}

.character_main{
    overflow: hidden;
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(/imgs/figure/大背景.png) no-repeat;
    background-position: center bottom;
    background-size: auto 100vh;
}

.character_list{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    list-style: none;
    padding: 0;
    
    user-select: none;
}

.list{
    display: flex;
    opacity: 1 !important;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition-property: opacity;
    pointer-events: auto;
}

.l{
    width: 100%;
    height: 100%;
}

.list::before{
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: calc(50% - 79vh);
    display: block;
    content: '';
    width: 154vh;
    height: 52vh;
    background: url(/imgs/figure/下半背景.png) center no-repeat;
    background-size: 154vh 52vh;
}

.character_person{
    opacity: 1;
    transform: translateX(0);
    left: calc(50% - 53vh);
    position: absolute;
    top: 0;
    width: auto;
    height: 100vh;
}

.character_icon{
    left: calc(50% - 65vh);
    position: absolute;
    top: 12%;
    height: 378px;
    opacity: 0.1;
}

.introduce{
    left: calc(50% - 59vh);
    position: absolute;
    z-index: 4;
    top: 20vh;
    width: 550px;
    text-align: justify;
}

.introduce::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: block;
    content: '';
    width: 180px;
    height: 4px;
    background: #e3bc8c;
}

.character_name{
    width: 50vh;
    height: auto;
    margin-top: 20px;
}

.character_cv{
    position: relative;
    display: flex;
    width: 330px;
    height: 54px;
    font-size: 24px;
    color: #24333c;
    line-height: 54px;
    padding-left: 60px;
    box-sizing: border-box;
    background: #cca574 url(/imgs/figure/cv标.png) no-repeat;
    background-position: left top;
    background-size: 54px;
    margin-top: -10px;
    display: block;
}

.character_cv_name{
    position: relative;
    overflow: hidden;
}

.character_cv_name>div{
    display: flex;
    white-space: nowrap;
}

.character_cv_text{
    margin-top: 0;
}

.character_intro{
    display: flex;
    width: 100%;
    min-height: 26px;
    max-height: 150px;
    overflow-y: hidden;
    padding: 10px 0 10px 15px;
    box-sizing: border-box;
    background: rgba(1,1,1,0.5);
    font-size: 16px;
    color: #fff;
    margin-top: 17px;
    line-height: 20px;
}

.character_intro::before{
    box-sizing: border-box;
    flex-shrink: 0;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background: url(/imgs/figure/话前标.png);
    background-size: 20px;
    margin-right: 24px;
    margin-top: 20px;
}

.character_custom{
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: 0;
    direction: ltr;
}

.character_custom_text{
    margin-right: 0;
    width: auto;
    height: auto;
}

.text{
    width: 455px;
}

.character_sen{
    left: calc(50% - 140px);
    position: absolute;
    top: 66vh;
}